<template>
    <jb-crud-page
        ref="rolePermissionsPage"
        :search-url="`/api/admin/role/permissionSettingDatas/${props.roleId}`"
        :pager="false"
        :search-btn-shown="false"
        :reset-btn-shown="false"
        @after-render="reexpand"
    >
        <template #conditions-form>
            <jb-btn
                :type="showTree == true ? 'primary' : 'default'"
                @click="showTree = true"
                >整体树形表格</jb-btn
            >
            <jb-btn
                :type="showTree == false ? 'primary' : 'default'"
                @click="showTree = false"
                >拆分属性表格</jb-btn
            >
        </template>
        <template #opt>
            <jb-btn type="primary" secondary @click="save">保存设置</jb-btn>
            <jb-btn
                confirm-text="确认清空该角色的所有权限吗？"
                :url="`/api/admin/role/clearPermissions/${props.roleId}`"
                type="error"
                class="mx-10px"
                secondary
                @success="rolePermissionsPage?.loadData()"
                >全部清空</jb-btn
            >
        </template>
        <template #default="{ list }">
            <div v-if="showTree">
                <vxe-table
                    ref="treeTableRef"
                    border
                    :column-config="{ resizable: true }"
                    :checkbox-config="{ checkField: 'isChecked' }"
                    show-header-overflow
                    show-overflow="tooltip"
                    :row-config="{ isHover: true }"
                    align="center"
                    :tree-config="{
                        childrenField: 'items',
                        parentField: 'eachLevel',
                        expandAll: true
                    }"
                    :data="list"
                >
                    <jb-column
                        field="name"
                        title="资源"
                        align="left"
                        tree-node
                    ></jb-column>
                    <jb-column field="isMenu" title="资源类型" width="100">
                        <template #default="{ row }">
                            <n-tag v-if="row.isMenu == 1" type="info"> 菜单 </n-tag>
                            <n-tag
                                v-else
                                :color="{
                                    color: '#BBB',
                                    textColor: '#555',
                                    borderColor: '#555'
                                }"
                            >
                                非菜单
                            </n-tag>
                        </template>
                    </jb-column>
                    <jb-column
                        fixed="right"
                        type="checkbox"
                        title="选择"
                        width="100"
                    ></jb-column>
                </vxe-table>
            </div>
            <jb-page
                v-for="item in list"
                v-else
                :key="item.id"
                :bordered="true"
                :segmented="{
                    content: true,
                    footer: 'soft'
                }"
                class="mt-10px"
            >
                <template #conditions>
                    <div class="flex items-center">
                        <jb-icon :icon="item.icons"></jb-icon>
                        <span class="ml-2">{{ item.name }}</span>
                    </div>
                </template>
                <vxe-table
                    border
                    :column-config="{ resizable: true }"
                    :checkbox-config="{ checkField: 'isChecked' }"
                    show-header-overflow
                    show-overflow="tooltip"
                    :row-config="{ isHover: true }"
                    align="center"
                    :tree-config="{
                        childrenField: 'items',
                        parentField: 'eachLevel',
                        expandAll: true
                    }"
                    :data="[item]"
                >
                    <jb-column
                        field="name"
                        title="资源"
                        align="left"
                        tree-node
                    ></jb-column>
                    <jb-column field="isMenu" title="资源类型" width="100">
                        <template #default="{ row }">
                            <n-tag v-if="row.isMenu == 1" type="info"> 菜单 </n-tag>
                            <n-tag
                                v-else
                                :color="{
                                    color: '#BBB',
                                    textColor: '#555',
                                    borderColor: '#555'
                                }"
                            >
                                非菜单
                            </n-tag>
                        </template>
                    </jb-column>
                    <jb-column
                        fixed="right"
                        type="checkbox"
                        title="选择"
                        width="100"
                    ></jb-column>
                </vxe-table>
            </jb-page>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { JBoltApi } from '@/utils'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import type { VxeTableInstance } from 'vxe-table'

const rolePermissionsPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const props = defineProps<{
    roleId: string
}>()
const showTree = ref(true)

function save() {
    let arr = rolePermissionsPage.value!.state.list
    // let isCheckedArr = arr.filter((item) => item.isChecked)
    let permissions = [...getCheckedIds(arr)].join(',')
    console.debug(permissions)
    JBoltApi.post('/api/admin/role/submitPermissions', {
        roleId: props.roleId,
        permissions: permissions
    }).then(() => {
        rolePermissionsPage.value?.loadData()
    })
}
function getCheckedIds(arr: any[]): Set<string> {
    return arr.reduce((prev, item) => {
        if (item.isChecked) {
            prev.add(item.id)
        }
        if (item.items) {
            const subIds = getCheckedIds(item.items)
            if (subIds.size) {
                prev.add(item.id)
                subIds.forEach((id) => prev.add(id))
            }
        }
        return prev
    }, new Set<string>())
}

const treeTableRef = ref<VxeTableInstance<any>>()
function reexpand() {
    const $table = treeTableRef.value
    if ($table) {
        $table.setAllTreeExpand(true)
    }
}
</script>
<style scoped></style>
